<template>
    <div class="record_warp">
        <div class="title">
            <span>装扮记录</span>
        </div>
        <div class="content">
            <div class="explain">
                如果您通过【HTML模块】装扮主页导致主页异常时，可以以下记录中选择某次装扮主页时备份的记录进行恢复，其中系统只保留近期10次的主页装扮备份记录。
                如果主页无法正常打开水时，也可以尝试点击【一键恢复初始化主页装扮】，恢复成功后便可以打开个人主页。
            </div>
            <div class="costume_record">
                <el-divider content-position="left">装扮记录</el-divider>
                <div class="costume_warp">
                    <div class="record_list">
                        <div class="record">
                            <span class="dot_num">1</span>
                            <span class="date">2020-04-16</span>
                            <span class="time">15:28:06</span>
                            <span class="modify">的主页装扮备份记录 - 最后操作：模块变更</span>
                        </div>
                        <el-button plain>恢复备份</el-button>
                    </div>
                </div>
            </div>
            <div class="init">
                <el-button plain>一键恢复初始化主页装扮</el-button>
                <span>注：一键恢复初始化主页装扮，当前主页装扮效果将会丢失</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
    }
</script>

<style lang="scss" scoped>
.record_warp{
    width: 100%;
    .title{
        text-align: left;
        border-bottom: 1px solid #DCDFE6;
        box-sizing: border-box;
        padding-bottom: 10px;
    }
    .content{
        box-sizing: border-box;
        padding-top: 10px;
        .explain{
            text-indent: 30px;
            text-align:justify;
            text-justify:inter-ideograph;
            color: #606266;
            font-size: 14px;
        }
        .costume_record{
            box-sizing: border-box;
            padding: 10px 0;
            .costume_warp{
                box-sizing: border-box;
                padding: 10px;
                border: 1px solid #DCDFE6;
                .record_list{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 15px;
                    .record{
                        font-size: 14px;
                        color: #606266;
                        .dot_num{
                            display: inline-block;
                            width: 25px;
                            height: 25px;
                            border-radius: 50%;
                            text-align: center;
                            border: 1px solid #DCDFE6;
                            line-height: 25px;
                        }
                    }
                    .record > span{
                        margin-right: 10px;
                    }
                }
                .record_list:last-child{
                    margin-bottom: 0;
                }
            }
        }
        .init{
            color: #606266;
            font-size: 14px;
            text-align: left;
        }
        .init>span{
            margin-left: 20px;
        }
    }
}
</style>